import React, { Component } from 'react'
import { connect } from 'react-redux'

export class Car extends Component {
    render() {
        const { carList, allPrice, changeItemCheck } = this.props
        return (
            <div>
                <ul className="car-list">
                    {
                        carList.map((item, index) => {
                            return <li key = { item.goods_id }>
                                <input checked = { item.flag } onChange = {(ev) => {
                                    changeItemCheck(ev.target.checked, index)
                                }} type="checkbox" />
                                { item.goods_name }  ---- { item.count }
                            </li>
                        })
                    }
                </ul>
                {
                    allPrice > 0? <div>
                        <h3>
                            总价格为：{ allPrice.toFixed(2) }
                        </h3>
                    </div>: ""
                }
                
            </div>
        )
    }
}

const mapStateToProps = (state) => {
    const { carList, allPrice } = state
    return {
        carList,
        allPrice
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        changeItemCheck(flag, index) {
            dispatch({ type: "CHANGE_ITEM_CHECKED", flag, index })
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Car)
